<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="java.util.Calendar"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	    <meta http-equiv="content-language" content="zh-cn" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="//cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
	    <title>登录</title>
		<style>
			body{
				font-family: 'microsoft yahei',Arial,sans-serif;
				background-color: #222;
			}

			.redborder {
				border:2px solid #f96145;
				border-radius:2px;
			}

			.row {
				padding: 20px 0px;
			}

			.bigicon {
				font-size: 97px;
				color: #f08000;
			}

			.loginpanel {
				text-align: center;
				width: 300px;
				border-radius: 0.5rem;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 10px auto;
				background-color: #555;
				padding: 20px;
			}

			input {
				width: 100%;
				margin-bottom: 17px;
				padding: 15px;
				background-color: #ECF4F4;
				border-radius: 2px;
				border: none;
			}

			h2 {
				margin-bottom: 20px;
				font-weight: normal;
				color: #EFEFEF;
			}

			.btn {
				border-radius: 2px;
				padding: 10px;
			}

			.btn span {
				font-size: 27px;
				color: white;
			}

			.buttonwrapper{
				position:relative;
				overflow:hidden;
				height:50px;
			}

			.lockbutton {
				font-size: 27px;
				color: #f96145;
				padding: 10px;
				width:100%;
				position:absolute;
				top:0;
				left:0;
			}
			.loginbutton {
				background-color: #f08000;
				width: 100%;
				-webkit-border-top-right-radius: 0;
				-webkit-border-bottom-right-radius: 0;
				-moz-border-radius-topright: 0;
				-moz-border-radius-bottomright: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				left: -260px;
				position:absolute;
				top:0;
			}
			.error{
				color: red;
				font-size: larger;
			}
		</style>
		<script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<%--<div class="mainCon">
			<form:form method="post" commandName="${commandName}" htmlEscape="true" onsubmit="return ksd._login();">
				<div id="msgContainer" class="login-tip"><form:errors path="*" id="msg" cssClass="" element="div" /></div>
				<div class="login-user">
					<span class="login-text">用户名</span>
					<form:input id="username" path="username" htmlEscape="true" autocomplete="off" tabindex="1" value="${mail}" maxlength="40" />
				</div>
				<div class="login-password">
					<span class="login-text">密码</span>
					<form:password id="password" path="password" htmlEscape="true" autocomplete="off" tabindex="2" maxlength="20" />
				</div>
				<input type="hidden" name="lt" value="${loginTicket}" />
				<input type="hidden" name="execution" value="${flowExecutionKey}" />
				<input type="hidden" name="_eventId" value="submit" />
				<input class="btn-login" type="submit" value="登录" />
			</form:form>
		</div>--%>

		<!-- Interactive Login - START -->
		<div class="container-fluid">
			<div class="row">
				<form:form id="sub_form" method="post" commandName="${commandName}" htmlEscape="true">
				<div class="loginpanel">
					<i id="loading" class="hidden fa fa-spinner fa-spin bigicon"></i>
					<h2>
						<span class="fa fa-quote-left "></span> 登录 <span class="fa fa-quote-right "></span>
					</h2>
					<form:errors path="*" id="msg" cssClass="error" element="h4" />
					<div>
						<form:input id="username" path="username" htmlEscape="true" autocomplete="off" tabindex="1" value="${mail}" maxlength="40"  placeholder="输入帐号" onkeyup="check_values()"/>
						<form:password id="password" path="password" htmlEscape="true" autocomplete="off" tabindex="2" maxlength="20" placeholder="输入密码" onkeyup="check_values()"/>
						<input type="hidden" name="lt" value="${loginTicket}" />
						<input type="hidden" name="execution" value="${flowExecutionKey}" />
						<input type="hidden" name="_eventId" value="submit" />
						<div class="buttonwrapper">
							<button id="loginbtn" class="btn btn-warning loginbutton">
								<span class="fa fa-check"></span>
							</button>
							<span id="lockbtn" class="fa fa-lock lockbutton redborder"></span>
						</div>
					</div>
				</div>
				</form:form>
			</div>
		</div>

		<script type="text/javascript">
            function check_values() {
                if ($("#username").val().length != 0 && $("#password").val().length != 0) {
                    $("#loginbtn").animate({ left: '0' , duration: 'slow'});
                    $("#lockbtn").animate({ left: '260px' , duration: 'slow'});
                }
            }

            $("#loginbtn").click(function(){
                $('#loading').removeClass('hidden');
                //这里书写登录相关后台处理，例如: Ajax请求用户名和密码验证
				$("#sub_form").submit();
            });

		</script>

		<!-- Interactive Login - END -->

		<div class="container-fluid">
			<div class="row footerbox">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<footer class="text-center">
						<a href="https://www.ipav.vip"><i class="fa fa-external-link"></i> 想了解更多？搜索一下哦</a>
					</footer>
				</div>
				<div class="col-md-1"></div>
			</div>
		</div>
	</body>
</html>